<header class="site-header">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a href="index.html" class="navbar-brand d-flex align-items-center">
        <svg
          class="mr-2"
          width="20"
          height="20"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          aria-hidden="true"
          viewBox="0 0 24 24"
          focusable="false"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
          />
          <circle cx="12" cy="13" r="4" />
        </svg>
        <span>{{ pkg.name | replace('[-_]', ' ', 'g') | title }}</span>
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#site_menu"
        aria-controls="site_menu"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="site_menu">
        <ul class="navbar-nav ml-auto">
          {% for item in menus %} {% set isCurrent = current === item.name |
          lower %}
          <li
            class="nav-item{% if item.children %} dropdown{% endif %}{% if isCurrent %} active{% endif %}"
          >
            <a
              class="nav-link{% if item.children %} dropdown-toggle{% endif %} d-flex align-items-center"
              href="{{ item.link }}"
              {%
              if
              item.children
              %}
              id="nav-{{ item.name | lower }}-dropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              {%
              endif
              %}
              >{% if item.icon %}<i class="icon-{{ item.icon }} mr-1"></i> {%
              endif %}{{ item.name }}{% if isCurrent %}
              <span class="sr-only">(current)</span>{% endif %}</a
            >
            {% if item.children %}
            <div
              class="dropdown-menu"
              aria-labelledby="nav-{{ item.name | lower }}-dropdown"
            >
              {% for item in item.children %} {% if item.name === 'divider' %}
              <div class="dropdown-divider"></div>
              {% else %}
              <a
                class="dropdown-item d-flex align-items-center"
                href="{{ item.link }}"
                target="_brank"
                >{{ item.name }}</a
              >
              {% endif %} {% endfor %}
            </div>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </nav>
</header>
